/*
 * @Author: xiaosihan 
 * @Date: 2024-07-14 15:24:38 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-05 23:14:34
 */
import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./phoneLogin.module.less";
import { Button, Checkbox, Col, Form, FormProps, Input, Row, Space } from "antd";
import loginStore from "../loginStore";
import wxIconPNG from "./wxIcon.png";
import utils from "@utils";
import userStore from "@views/userStore";
import loginApi from "@api/loginAPI";

interface Iprops {
    children?: ReactNode
}

// 电话号码登录
export default function PhoneLogin() {

    const [form] = Form.useForm();
    const [time, setTime] = useState(0);

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {

    }), []);

    //发送短信验证码
    const send_sms = async () => {
        form.validateFields(["phone"])
            .then(async () => {
                const phone = form.getFieldValue("phone");
                const snedSMSResult = await loginApi.send_sms(phone);
                timeDown(utils.isDev ? 5 : 60);
            }).catch(err => {
            })
    }

    // 倒计时
    const timeDown = (time: number) => {
        setTime(time);
        if (time > 0) {
            setTimeout(() => {
                timeDown(time - 1);
            }, 1000);
        }
    }

    // 登录
    const login = () => {
        form.validateFields()
            .then(async () => {
                const phone = form.getFieldValue("phone");
                const code = form.getFieldValue("code");
                const error = await userStore.loginByPhone(phone, code);
                form.setFields([{
                    name: ['code'],
                    errors: [error], // 清空错误  
                }]);
            }).catch(err => {
            })
    }

    type FieldType = {
        phone?: string;
        code?: string;
    };

    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div className={styles.phoneLogin} >

            <div className={styles.title} >快捷登录</div>

            <Form
                form={form}
                name="basic"
                style={{ width: 300 }}
                initialValues={{}}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item<FieldType>
                    name="phone"
                    rules={[{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]}
                >
                    <Input
                        className={styles.input}
                        placeholder="请输入手机号"
                        size="large"
                    />
                </Form.Item>

                <div style={{ position: "relative" }} >
                    <Form.Item<FieldType>
                        name="code"
                        rules={[{ required: true, pattern: /^\d{6}$/, message: '请输入正确的验证码' }]}
                    >
                        <Input
                            className={styles.input}
                            size="large"
                            placeholder="请输入验证码"
                        />
                    </Form.Item>
                    <Button
                        size="large"
                        disabled={time > 0}
                        type="link"
                        className={styles.snedSMS}
                        onClick={() => send_sms()}
                    >发送验证码{time > 0 ? time : ""}</Button>
                </div>
            </Form>

            <Button
                className={styles.loginBtn}
                type="primary"
                block
                size="large"
                onClick={() => login()}
            >登录</Button>

            <div>登录即注册,表示您已阅读并同意服务条款</div>

            {/* <div
                className={styles.wx_login}
                onClick={() => loginStore.setLoginType("wx_login")}
            >
                <img
                    alt=""
                    src={wxIconPNG}
                    className={styles.icon}
                />
                微信登录
            </div> */}

        </div>
    );

}

